<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>神舟商城官网-提供神舟笔记本、台式机、平板电脑、电脑外设等产品的购买服务</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/cart.css">
</head>

<body>
    <header>
        <div class="header_top">
            <p class="follow_us">
                <span>关注我们</span>
                <a href="#" class="icon_weibo"></a>
                <a href="#" class="icon_baidu"></a>
                <a href="#" class="icon_weixin"></a>
            </p>
            <p class="head_link">
                <a href="../html/resign.html" id="login">登录</a>|
                <a href="../html/resign.html" id="register">注册</a>|
                <a href="">销售网点</a>|
                <a href="">服务网点</a>
            </p>
        </div>

        <div class="head_center">
            <a href="#" class="logo"></a>
            <p class="sp">购物车</p>
            <div class="liucheng">
                <ul>
                    <li><a href="">
                            <p style="background: url(http://www.hasee.net/images/shop_bg1_2.png);">1</p>我的购物车
                        </a></li>
                    <li><a href="">
                            <p>2</p>填写核对订单
                        </a></li>
                    <li><a href="">
                            <p>3</p>支付
                        </a></li>
                    <li><a href="">
                            <p>4</p>订单成功
                        </a></li>
                </ul>
            </div>
        </div>

        <div class="head_nav">
            <ul class="nav">
                <li class="first_li"><a href="">全部商品分类<i></i></a>
                    <div class="all" style="display: none;">
                        <ul>
                            <li><a href="javascript:;">笔记本</a>
                                <div class="fenlei">
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>至强王者1</h2>
                                            <h3>超级战神</h3>
                                            <p>战神GX9-CT5DK</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>强悍性能</h2>
                                            <h3>战神系列</h3>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>精盾系列产品</h2>
                                            <h3>精盾系列</h3>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>卓越体验</h2>
                                            <h3>飞天系列</h3>
                                        </dd>
                                    </dl>
                                </div>
                            </li>
                            <li><a href="javascript:;">优雅本</a>
                                <div class="fenlei">
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>至强王者2</h2>
                                            <h3>超级战神</h3>
                                            <p>战神GX9-CT5DK</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>强悍性能</h2>
                                            <h3>战神系列</h3>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>精盾系列产品</h2>
                                            <h3>精盾系列</h3>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>卓越体验</h2>
                                            <h3>飞天系列</h3>
                                        </dd>
                                    </dl>
                                </div>
                            </li>
                            <li><a href="javascript:;">台式机</a>
                                <div class="fenlei">
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>至强王者3</h2>
                                            <h3>超级战神</h3>
                                            <p>战神GX9-CT5DK</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>强悍性能</h2>
                                            <h3>战神系列</h3>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>精盾系列产品</h2>
                                            <h3>精盾系列</h3>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>卓越体验</h2>
                                            <h3>飞天系列</h3>
                                        </dd>
                                    </dl>
                                </div>
                            </li>
                            <li><a href="javascript:;">商用电脑</a>
                                <div class="fenlei">
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>至强王者4</h2>
                                            <h3>超级战神</h3>
                                            <p>战神GX9-CT5DK</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>强悍性能</h2>
                                            <h3>战神系列</h3>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>精盾系列产品</h2>
                                            <h3>精盾系列</h3>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>卓越体验</h2>
                                            <h3>飞天系列</h3>
                                        </dd>
                                    </dl>
                                </div>
                            </li>
                            <li><a href="javascript:;">周边</a>
                                <div class="fenlei">
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/7/20150715071520180.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>至强王者5</h2>
                                            <h3>超级战神</h3>
                                            <p>战神GX9-CT5DK</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819062423474.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>强悍性能</h2>
                                            <h3>战神系列</h3>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                            <p>战神Z7M-CT5GA</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2017/8/20170825030433672.jpg"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>精盾系列产品</h2>
                                            <h3>精盾系列</h3>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                            <p>KING BOOK-U45S2</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><a href=""><img
                                                    src="http://www.hasee.net/uploadfiles/images/2015/8/20150819060831115.png"
                                                    alt=""></a></dt>
                                        <dd>
                                            <h2>卓越体验</h2>
                                            <h3>飞天系列</h3>
                                        </dd>
                                    </dl>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="../index.html">首页</a></li>
                <li><a href="">新品推荐</a></li>
                <li><a href="">PCPad</a></li>
                <li><a href="">今日秒杀</a></li>
                <li><a href="">服务支持</a></li>
            </ul>
        </div>
    </header>

    <div class="main">
        <p>全部商品<span class="allcount">(0)</span></p>
        <table class="list" cellspacing="0" cellpadding="0">
            <tr class="list-top">
                <th><label><input type="checkbox" class="allSelect">全选</label></th>
                <th>宝贝</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>操作</th>
            </tr>
            <!-- <div class="pro1"> -->
            <tr class="list-bottom">
                <td style="border: none;"><input type="checkbox"></td>
                <td><img src="http://www.hasee.net/uploadfiles/images/2019/7/20190723114856016.jpg" alt="">
                    <p><a href="#">KING BOOK-X55A1 官方标配</a></p>
                </td>
                <td>4699.00</td>
                <td><input type="button" value="-"><input type="text" style="width: 30px; text-align: center;"
                        value="1"><input type="button" value="+"></td>
                <td>4699.00</td>
                <td style="border: none;"><a href="#">移入收藏夹</a><br><a href="#" class="del-btn">删除</a></td>
            </tr>
            <!-- </div> -->
        </table>
        <div class="wchy">
            <label><input type="checkbox" class="allSelect">全选</label><a href="#" class="del-sin">删除选中的商品</a><a href="#">移除收藏夹</a>
            <div class="rr">
                <p>已选<span class="sincount"></span>件商品</p>
                <p>合计(不含运费)<span class="allprice"></span></p>
                <a href="https://www.alipay.com/">去结算</a>
            </div>
        </div>
        <p style="margin-bottom: 35px;">猜你喜欢</p>
        <p style="margin-bottom: 35px;">我的收藏</p>
    </div>

    <footer>
        <div class="footer1">
            <div class="foot_top">
                <ul>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_1.png" alt=""></a>
                        <p>官方品质保障</p>
                    </li>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_2.png" alt=""></a>
                        <p>售后维修保障</p>
                    </li>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_3.png" alt=""></a>
                        <p>新品抢先体验</p>
                    </li>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_4.png" alt=""></a>
                        <p>个性化定制服务</p>
                    </li>
                    <li><a href="javascript:;"><img src="http://www.hasee.net/images/icon_5.png" alt=""></a>
                        <p>7天退货 15天换货</p>
                    </li>
                </ul>
            </div>
            <div class="foot_center">
                <ul>
                    <li>
                        <h2>帮助中心</h2>
                        <ul>
                            <li>购物指南</li>
                            <li>支付方式</li>
                            <li>配送方式</li>
                        </ul>
                    </li>
                    <li>
                        <h2>服务与支持</h2>
                        <ul>
                            <li>售后政策</li>
                            <li>服务网点</li>
                            <li>驱动下载</li>
                        </ul>
                    </li>
                    <li>
                        <h2>神船分舵</h2>
                        <ul>
                            <li>神舟电脑京东官方旗舰店</li>
                            <li>神舟电脑天猫旗舰店</li>
                            <li>神舟新舟专卖店</li>
                        </ul>
                    </li>
                    <li>
                        <h2>关于我们</h2>
                        <ul>
                            <li>公司简介</li>
                            <li>联系我们</li>
                            <li>加入我们</li>
                        </ul>
                    </li>
                    <li>
                        <h2>关注我们</h2>
                        <ul>
                            <li>新浪微博</li>
                            <li>官方微信</li>
                            <li>神舟笔记本吧</li>
                        </ul>
                    </li>
                    <li class="number">
                        <p>商用电脑热线:<span>400-058-9702</span></p>
                        <p>全国客服热线:<span>400-106-9999</span></p>
                        <p>上午9:00-12:30 &nbsp;下午14:00-18:00（节假日除外）</p>
                    </li>
                </ul>
            </div>

            <div class="foot_bottom">
                All rights reserved © 2015 Hasee<a href="javascript:;">粤ICP备11003995号</a>
                <p><a href="#">网站导航</a>|<a href="#">隐私安全</a>|<a href="#">版权所有</a>|<a href="#">常见问题</a></p>
            </div>
        </div>
    </footer>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        //导航栏
        $('.first_li').hover(function name(params) {
            console.log(1);
            // 二级导航栏
            $('.all').css({ display: 'block' })
            $('.all ul>li').mouseenter(function name(params) {
                // console.log($(this));
                // $(this).css('background', 'white').children().css('color', 'red')
                $(this).css('background', 'white').children().css('color', '#f33c11')
                // 商品分类显示

                $(this).find('.fenlei').css({ display: 'block' })

            })
            $('.all ul li').mouseleave(function name(params) {
                console.log($(this));
                $(this).css('background', '#f33c11').children().css('color', 'white')
                // 商品分类消失
                $(this).find('.fenlei').css({ display: 'none' })


            })
        }, function name(params) {
            $('.all').css({ display: 'none' })
        })

        let uid = localStorage.getItem('id')
        let token = localStorage.getItem('token')
        let username = localStorage.getItem('username')
        if(token){
                $('#login').html(username)
                $('#register').html('退出')
                $('#register').click(function name(params) {
                    localStorage.removeItem('token')
                    localStorage.removeItem('id')
                    localStorage.removeItem('username')
                    location.href='../html/login.html'
                })
         
        //购物车
        
        let id = localStorage.getItem('id')
        $.ajax({
            url: 'http://jx.xuzhixiang.top/ap/api/cart-list.php',
            type: 'get',
            data: { id }
        }).then(res => {
            console.log(res);
            let pList = res.data
            let html = ''
            let numm = 0
            $.each(res.data, function (i, v) {
                v.isSelect = false
                numm+=parseInt(res.data[i].pnum)
                console.log(numm);
                
                $('.allcount').html('('+numm+')')
                html += `
           
           
            <tr class="list-bottom">
                <td  style="border: none;" ><input data-id="${v.pid}" type="checkbox" class="sinSelect"></td>
                <td><img src="${v.pimg}" alt=""><p><a href="#">KING BOOK-X55A1  官方标配</a></p></td>
                <td>${v.pprice}</td>
                <td><input type="button" value="-" class="sub-btn" data-id="${v.pid}"><input type="text" style="width: 30px; text-align: center;" value="${v.pnum}"><input type="button" value="+" class="add-btn" data-id="${v.pid}"></td>
                <td class="sinprice" data-id="${v.pid}">${v.pnum*v.pprice}.00</td>
                <td style="border: none;"><a href="#">移入收藏夹</a><br><a href="#" class="del-btn" data-id="${v.pid}">删除</a></td>
            </tr>
                `
            })
            $('table').append(html)
            countPrice(pList)
            // 加号按钮
            $('.add-btn').click(function name(params) {
                let pid = $(this).attr('data-id')
                console.log(pid);
                let pObj = pList.find(v => v.pid == pid)
                console.log(pObj);
                pObj.pnum++;
                $.ajax({
                    url: 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php',
                    type: 'get',
                    data: { uid: id, pid, pnum: pObj.pnum }
                }).then(res => {
                    console.log(res);
                    $(this).prev().val(pObj.pnum)
                    $(this).parent().next().html(pObj.pnum*pObj.pprice+'.00')
                    countPrice(pList)
                    // sinPrice(pid,pList)
                    nummm()
                    
                })

            })

            //减号按钮
            $('.sub-btn').click(function name(params) {
                let pid = $(this).attr('data-id')
                console.log(pid);
                let pObj = pList.find(v => v.pid == pid)
                if (pObj.pnum == 1) {
                    return
                } else {
                    pObj.pnum--;
                }
                $.ajax({
                    url: 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php',
                    type: 'get',
                    data: { uid: id, pid, pnum: pObj.pnum }
                }).then(res => {
                    console.log(res);
                    $(this).next().val(pObj.pnum)
                    $(this).parent().next().html(pObj.pnum*pObj.pprice+'.00')
                    countPrice(pList)
                    nummm()
                })
                
            })

            //删除按钮
            $('.del-btn').click(function name(params) {
                let pid = $(this).attr('data-id')
                $.ajax({
                    url: 'http://jx.xuzhixiang.top/ap/api/cart-delete.php',
                    type: 'get',
                    data: { uid: id, pid }
                }).then(res => {
                    console.log(res);
                        $.ajax({
                            url: 'http://jx.xuzhixiang.top/ap/api/cart-list.php',
                            type: 'get',
                            data: { id }
                        }).then(res=>{
                            console.log(res.data);
                            
                            let pList = res.data
                            $.each(pList,function name(i,v) {
                                pList[i].isSelect=true
                            })
                            countPrice(pList)
                            allBtn()
                            nummm()
                           
                        })
                      
                        
                        $(this).parent().parent().remove()
                    })
                    
                })

                //全选按钮
                allBtn()
                function allBtn(params) {
                    $('.allSelect').click(function name(params) {
                        console.log($(this));

                        console.log($(this).prop('checked'));
                        let allSelect = $(this).prop('checked')


                        $.each(pList, function name(i, v) {
                            pList[i].isSelect = allSelect
                            console.log(pList);


                        })
                        $('.sinSelect').prop('checked', allSelect)
                        $('.allSelect').prop('checked', allSelect)
                        countPrice(pList)
                    })

                    //单选按钮
                    if ($('.sinSelect').length == 0) {
                        $('.allSelect').prop('checked', false)
                    }
                    $('.sinSelect').click(function name(params) {
                        let pid = $(this).attr('data-id')
                        let pObj = pList.find(v => v.pid == pid)
                        pObj.isSelect = $(this).prop('checked')
                        console.log(pObj);
                        
                        //转为真数组
                        let sinArr = Array.from($('.sinSelect'))


                        let res = sinArr.every(v => v.checked == true)
                        console.log(res);

                        $('.allSelect').prop('checked', res)

                        
                        countPrice(pList)
                    })
                }

                //删除选中的商品
                $('.del-sin').click(function name(params) {
                    
                    $.each(res.data,function name(i,v) {
                        console.log(1);
                        
                        if(res.data[i].isSelect==true){
                            console.log(1);
                            
                            pObj = res.data[i]
                            console.log(pObj);
                            
                            let pid = pObj.pid
                            $.ajax({
                    url: 'http://jx.xuzhixiang.top/ap/api/cart-delete.php',
                    type: 'get',
                    data: { uid: id, pid }
                }).then(res => {
                    console.log(res);
                        $.ajax({
                            url: 'http://jx.xuzhixiang.top/ap/api/cart-list.php',
                            type: 'get',
                            data: { id }
                        }).then(res=>{
                            console.log(res.data);
                            let pList = res.data
                            $.each(pList,function name(i,v) {
                                pList[i].isSelect=true
                            })
                            countPrice(pList)
                            allBtn()
                            nummm()
                        })
                        console.log($(this));
                        
                        location.reload()
                       
                    })
                    }
                    })
                })

            })

            


            //计算价格
            function countPrice(pList) {
                let count = 0
                let sincount=0
                $.each(pList, function (i, v) {
                    if (pList[i].isSelect == true) {
                        count += pList[i].pprice * pList[i].pnum
                        sincount+=parseInt(pList[i].pnum)
                    }
                })
                console.log(count);
                $('.sincount').html('('+sincount+')')
                $('.allprice').html('￥' + count+'.00')
            }
           
            function nummm() {
                $.ajax({
                        url: 'http://jx.xuzhixiang.top/ap/api/cart-list.php',
                        type: 'get',
                        data: { id }
                    }).then(res=>{
                        let numm = 0
                        $.each(res.data,function name(i,v) {
                            numm+=parseInt(res.data[i].pnum)
                        })
                        $('.allcount').html('('+numm+')')
                    })
            }
              
        }
           
    </script>
</body>

</html>